<template>
	<div class='music-container'>
		<!--头部块-->
		<div class='header-div'>
			<div class='header-top1'>
				<div class='top-left'>
					<span class='text1'>M</span>
					<span class='text2'>我的音乐</span>
				</div>
				<div class='top-right'>
					<input type="text" placeholder="歌手/歌名"
						v-model.trim='keyword'
						placeholder-style="color:#e5e5e5;"
						@confirm='onSearchKeyword' />
					<i class='iconfont icon-sousuo1' @click='onSearchKeyword'/>
					<!--提示语框-->
					<div class='tip-div' v-if='searchTipList.length>0'>
						<ul>
							<li v-for='(item,i,key) in searchTipList' :key='key'
								@click='toSearchSong(item.HintInfo)'>
								{{item.HintInfo}}
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--轮播图-->
			<div class='header-top2'>
				<swiper 
					circular="true" indicator-dots="true" autoplay="true" 
					interval="3000" duration="500"
					indicator-color="#2ca2f9" indicator-active-color="#d1c90e"
				>
					<swiper-item v-for='(img,index,key) in swiperImgs' :key='key'>
						<view class="swiper-item">
							<image :src="img" mode="scaleToFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</div>
		</div>
		
		<!--空白符-->
		<div class='space-div'></div>
		
		<!--渲染列表搜索出来的盒子-->
		<div class='music-div' v-show='songList.length>0'>
			<ul>
				<li class='flex' v-for='(item,i,key) in songList' :key='key'
					:class="chooseIndex==i? 'active': ''"
					@click.stop='getSongDetailInfo(i)'>
					<div class='text'>
						<p>{{item.SongName}}</p>
						<p class='singer'>{{item.SingerName}}</p>
					</div>
				</li>
			</ul>
		</div>
		
		
		<!--播放旋转盒子-->
		<div class='play-div' v-if='playBoxShow'>
			<div class='img-div' :class='{run:isPlaying}'>
				<image :src='songDetail.authors.avatar'></image>
			</div>
			<div class='music-info'>
				<p>{{songDetail.song_name}}</p>
				<p class='singer'>{{songDetail.author_name}}</p>
			</div>
			<div class='play-components'>
				<i class='iconfont icon-kuaijin-copy prev' @click.stop='prevSong'></i>
				<i class='iconfont lay'
					:class="[isPlaying? 'icon-Icon-pause': 'icon-zanting']"
					@click.stop='onMusicTap'></i>
				<i class='iconfont icon-kuaijin next' @click.stop='nextSong'></i>
			</div>
			<i class="iconfont icon-xiazai download" @click.stop="downloadMusic"></i>
		</div>
		
	</div>
</template>

<script>
import {get,showToast} from '@/utils/index.js';
import {mapGetters,mapAction} from 'vuex';
export default {
	data(){
		return {
			keyword: '',  //搜索关键词
			swiperImgs: [  //轮播图
				'/static/img/banner1.jpg',
				'/static/img/banner2.jpg',
				'/static/img/banner3.jpg'
			],
			chooseIndex: -1,  //选择的歌曲
			playDivShow: false,  //播放盒子显示
		}
	},
	computed: {
		...mapGetters('music', ['bgAudioMannager','searchTipList', 'songList', 'songDetail', 'playBoxShow', 'isPlaying']),
	},
	mounted(){
		this.setMusicMonitor();
	},
	methods: {
		//初始化数据
		initData(){
			this.$store.commit('music/INITDATA');
			this.$store.commit('music/SET_SEARCHLIST', []);  //提示列表
		},
		//根据关键词搜索体魄是歌曲
		onSearchKeyword(){
			var keyword = this.keyword;
			if(!keyword){
				showToast('请输入搜索内容');
				return;
			};
			this.$store.dispatch('music/getSearchList', this.keyword)
			.catch((ex)=>{
				console.log(ex);
			});
		},
		//搜素歌曲列表
		toSearchSong(keyword){
			this.keyword = keyword;
			this.initData();
			this.$store.dispatch('music/getSongList', {
				keyword: this.keyword,
			});
		},
		//获取歌曲详情
		getSongDetailInfo(index){
			this.chooseIndex = index;
			var hash;
			if(this.songList[index]){
				hash = this.songList[index].FileHash;
				this.$store.dispatch('music/getSongDetail', hash)
				.then(()=>{
					//播放音乐
					this.$store.commit('music/play_music');
				})
				.catch();
			}
		},
		//暂停/播放
		onMusicTap(){
			if (!this.isPlaying){
				this.bgAudioMannager.play();  //播放播放
				this.$store.commit('music/SET_PLAYSTATUS', true);
			}else{
				this.bgAudioMannager.pause();  //暂停音乐
				this.$store.commit('music/SET_PLAYSTATUS', false);
			}
		},
		//上一首歌曲
		prevSong(){
			var index = this.chooseIndex-1;
			index = index<0? 0: index;
			this.getSongDetailInfo(index);
		},
		//下一首歌曲
		nextSong(){
			var index = this.chooseIndex+1;
			index = index>=this.songList.length ? 0: index;
			this.getSongDetailInfo(index);
		},
		//下载歌曲
		downloadMusic(){
			let src = this.songDetail.url;
			//下载歌曲
			uni.showLoading({
				title: '下载中...'
			});
			uni.downloadFile({
				url: src,
				success:(res)=>{
					uni.hideLoading();
					let tmp = res.tempFilePath;
					//ifdef APP-PLUS
					tmp = plus.io.convertLocalFileSystemURL(tmp);
					uni.showModal({
						title: '下载完毕',
						content: `保存路径:${tmp}`
					});
					//endif
					//ifdef MP-WEXIN
					uni.saveFile({
						tempFilePath: tmp,
						success: (res)=>{
							uni.showModal({
								title: '下载完毕',
								content: `保存路径:${res.savedFilePath}`
							});
						}
					})
					//endif
				}
			});
		},
		//监听音乐播放情况
		setMusicMonitor: function () {
			//注意这里一定要用这个这个API，不然真机没法生效
			//监听音乐播放
			var self = this;
			this.bgAudioMannager.onPlay(()=>{
				self.$store.commit('music/SET_PLAYSTATUS', true);
			});
			//监听音乐暂停
			this.bgAudioMannager.onPause(()=>{
				self.$store.commit('music/SET_PLAYSTATUS', false);
			});
			//用户在系统音乐播放面板点击上一曲事件
			this.bgAudioMannager.onPrev(()=>{
				self.prevSong();
			});
			//用户在系统音乐播放面板点击下一曲事件
			this.bgAudioMannager.onNext(()=>{
				self.nextSong();
			});
			//音乐结束停止
			this.bgAudioMannager.onEnded(()=>{
				self.$store.commit('music/SET_PLAYSTATUS', false);
				//音乐停止，播放下一首
				var index = self.chooseIndex+1;  //歌曲序列号
				index = index>= self.songList.length? 0: index;
				self.chooseIndex = index;
				self.getSongDetailInfo(index);
			});
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		uni.hideNavigationBarLoading();
		this.initData();
	},
	//到达底部，加载更多
	onReachBottom() {
		this.$store.dispatch('music/getSongList', {
			keyword: this.keyword,
		});
	}
}
</script>

<style scoped lang='less'>
@import '../../style/default.less';
.music-container{
	color:#333;
	font-size:14px;
	.header-div{
		position: fixed;
		width: 100%;
		top: 0;
		left:0;
		.marginTop44{
			margin-top:44px; 
		}
		.header-top1{
			border-top:1px solid #e5e5e5;
			width:100%;
			height:50px;
			display: flex;
			align-items: center;
			padding: 0 10px;
			box-sizing: border-box;
			background: @mainColor;
			color: #fff;
			.top-left{
				flex:1;
				span.text1{
					font-size:22px;
					border-radius:50%;
					border:2px solid #fff;
					display:inline-block;
					width:28px;
					height:28px;
					line-height:28px;
					text-align: center;
					vertical-align: middle;
				}
				span.text2{
					font-size:16px;
					margin-left:5px;
					vertical-align: middle;
				}
			}
			.top-right{
				flex:2;
				position: relative;
				display: flex;
				height:100%;
				align-items: center;
				input{
					border-radius:5px;
					border: 1px solid #fff;
					flex: 6;
					height: 28px;
					color: #fff;
					padding: 0 5px;
					box-sizing: border-box;
				}
				/**设置输入框的placeholder样式**/
				i{
					flex:1;
					text-align: center;
					font-size: 26px;
				}
				/**提示语**/
				.tip-div{
					width:100%;
					position: absolute;
					padding:5px 10px;
					top:40px;
					left:0;
					background: #fff;
					border-radius:8px;
					padding:10px;
					box-sizing: border-box;
					z-index:2;
					color:#333;
					border:1px solid @mainColor;
					ul{
						li+li{
							border-top:1px solid #e5e5e5;
							line-height: 30px;
						}
					}
				}
			}
		}
		.header-top2{
			swiper{
				height: 150px;
				image{
					width:100%;
					height:150px;
				}
			}
		}
	}
	/**空白符**/
	.space-div{
		height: 200px;
	}
	/**歌曲渲染列表**/
	.music-div{
		background: #FFFFFF;
		ul{
			li:nth-child(1){
				border-top: #BEBEBE solid 1px;
			}
			li{
				border-bottom: #BEBEBE solid 1px;
				box-sizing: border-box;
				padding: 0 10px;
				height:60px;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				&.active{
					background: #e5e5e5;
				}
				p{
					width: 100%;
				}
				p.singer{
					color: #007AFF;
					font-size:12px;
				}
			}
		
		}
	}
}	
/**显示播放信息盒子**/
.play-div{
	position: fixed;
	width:100%;
	height: 85px;
	bottom:0;
	left:0;
	display: flex;
	align-items: center;
	padding:5px;
	box-sizing: border-box;
	background: rgba(0,0,0,0.8);
	color: #fff;
	.img-div{
		flex: 1;
		height: 100%;
		padding:5px;
		box-sizing: border-box;
		align-item: center;
		justify-content:center;
		image{
			width: 120upx;
			height: 120upx;
			border-radius:50%;
		}
	}
	.img-div.run{
		animation:running 5s linear infinite;
	}
	.music-info{
		flex:3;
		height: 100%;
		.singer{
			font-size:14px;
			color: #e5e5e5;
		}
	}
	.play-components{
		flex:2;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		i{
			font-size: 70upx;
		}
	}
	i.download{
		color: #fff;
		font-size: 70upx;
	}
}
@keyframes running{
	from{
		transform: rotate(0deg);
	}
	to{
		transform: rotate(360deg);
	}
}
</style>